<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/3/26
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%String path = request.getContextPath()+"/";%>
<!DOCTYPE html>
<HTML>
<HEAD>
    <base href="<%=path%>">
    <TITLE> ZTREE DEMO - Standard Data </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="js/tree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="layui/css/font.css">
    <link rel="stylesheet" href="js/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/tree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.exedit.js"></script>
    <!-- ztree对checkbox的支持-->
    <script type="text/javascript" src="js/tree/js/jquery.ztree.excheck.js"></script>
    <link rel="stylesheet" href="layui/lib/layui/css/layui.css">
    <script src="layui/lib/layui/layui.js" charset="utf-8"></script>

</HEAD>

<BODY>

        <div id="treeDemo" class="ztree"></div>




</BODY>
<script>
    //JavaScript代码区域
    layui.use(['form','layer'], function(){
        var form = layui.form;
        layer=layui.layer;
        var ztree;


        <!--
        var setting = {
            data:{
                simpleData:{
                    enable:true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            check:{
                enable:true
            },
            callback:{
                onCheck:nodeCheck
            }
        };
        function nodeCheck(event, treeId, treeNode){
            // alert(JSON.stringify(treeNode))
            var roleId = '${roleId}';
            var url="system/role/savePermission?roleId="+roleId;
            // 获取下当前选中的所有节点
            var checkedNodes = ztree.getCheckedNodes(true);
            if(checkedNodes.length>0){
                for(let i=0;i<checkedNodes.length;i++){
                    url+="&resourceIds="+checkedNodes[i].id;
                }
            }

            $.ajax({
                url:url,
                type:'get',
                dataType:'json',
                success:function(ret){
                    if(!ret.status){
                        layer.msg('操作失败');
                    }
                }

            });

            // 选中 将角色id和资源id插入到数据库

            // 取消选中   将角色id和资源Id从数据库删除

            // 如果选中的是顶层节点??

            // 在删除时，最后一个子节点的删除方式和其他子节点的删除方式不同
        }

        // 1.从sys_resource表中获取到list，使用异步请求，设置dataType=json
        // 2.从作用域中获取到一个json格式的字符串 JSON.parse()
        var zNodes;

        $(document).ready(function(){
            createTree();
            var height = $(document).height();
            $(".layui-col-md9").css("height",height+"px");
        });
        // 生成树的方法
        function createTree(){
            $.getJSON('system/resource/treeData?flag=1&roleId=${roleId}&t='+new Date(),function(ret){
               ztree = $.fn.zTree.init($("#treeDemo"), setting, ret);
                ztree.expandAll(true);
            })
        }
    });
</script>

</HTML>